<template>
	<view class="page-container">
		<!-- 搜索栏 -->
		<view class="search-container">
			<view class="search-box" :class="{ focused: isSearchFocused }">
				<text class="search-icon">🔍</text>
				<input 
					type="text" 
					v-model="searchKeyword" 
					class="search-input" 
					placeholder="搜索技术记录标题..." 
					@focus="isSearchFocused = true"
					@blur="isSearchFocused = false"
					@input="handleSearch"
				/>
			</view>
		</view>

		<!-- 难点列表 -->
		<scroll-view class="article-scroll" scroll-y>
			<view class="article-list">
				<view 
					class="article-item" 
					v-for="(article, index) in filteredArticles" 
					:key="index" 
					:class="{ 'featured': article.isFeatured }"
					@click="handleView(article._id)"
				>
					<view class="article-info">
						<view class="title-container">
							<text class="article-title">
								{{ article.title }}
							</text>
							<text class="featured-tag" v-if="article.isFeatured">精选</text>
						</view>
						
						<view class="article-meta">
							<text class="category">{{ article.category }}</text>
							<text class="date">{{ article.date }}</text>
							<text class="status" :class="article.status === '发布' ? 'published' : 'draft'">
								{{ article.status }}
							</text>
						</view>
						
						<text class="article-excerpt">
							{{ article.excerpt }}
						</text>
					</view>
					
					<view class="article-actions">
						<view class="action-icon view-btn" @click.stop="handleView(article._id)" title="查看">👁️</view>
						<view class="action-icon edit-btn" @click.stop="handleEdit(article._id)" title="编辑">✎</view>
						<view class="action-icon delete-btn" @click.stop="handleDelete(index, article._id)" title="删除">✕</view>
					</view>
				</view>
				
				<!-- 空状态 - 根据是否搜索显示不同内容 -->
				<view class="empty-state" v-if="filteredArticles.length === 0">
					<text class="empty-icon">{{ searchKeyword ? '🔍' : '📄' }}</text>
					<text class="empty-text">
						{{ searchKeyword ? '未找到相关技术记录' : '暂无技术记录' }}
					</text>
					<text class="empty-hint">
						{{ searchKeyword ? '尝试其他搜索关键词' : '点击下方按钮创建结束记录' }}
					</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部新增按钮 -->
		<view class="add-button" @click="handleAdd">
			<text class="add-icon">+</text>
			<text class="add-text">新增技术记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articles: [],          // 所有技术记录数据
				searchKeyword: '',     // 搜索关键词
				isSearchFocused: false // 搜索框是否聚焦
			};
		},
		
		onShow() {
			this.getInit()
		},
		
		computed: {
			// 根据搜索关键词过滤技术记录
			filteredArticles() {
				if (!this.searchKeyword.trim()) {
					return this.articles;
				}
				
				const keyword = this.searchKeyword.trim().toLowerCase();
				return this.articles.filter(article => 
					article.title.toLowerCase().includes(keyword) || 
					article.excerpt.toLowerCase().includes(keyword)
				);
			}
		},
		
		methods: {
			async getInit(){
				const submitData = {
					databaseName: 'articles',
					state: 'look'
				};
				// 调用接口获取技术记录列表
				let result = await this.$axios('overallSituation', submitData)
				
				if(result.code == 200){
					this.articles = result.data || []
				}
			},
			
			
			// 查看技术记录
			handleView(id) {
				this.$router(`/subPackages1/pages/article/look?id=${id}`);
			},
			
			// 编辑技术记录
			handleEdit(id) {
				this.$router(`/subPackages1/pages/article/edit?id=${id}`);
			},
			
			// 删除技术记录
			handleDelete(index, id) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这篇技术记录吗？',
					success: async (res) => {
						if (res.confirm) {
							const parmse = {
								databaseName: 'articles',
								state: 'delete',
								_id: id
							};
							// 调用接口删除
							let result = await this.$axios('overallSituation', parmse)
							if(result.code == 200){
								this.getInit()
								this.$showToast('删除成功')
							}
						}
					}
				});
			},
			
			// 新增技术记录
			handleAdd() {
				this.$router('/subPackages1/pages/article/edit');
			}
		}
	};
</script>

<style scoped>
	.page-container {
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
		background-color: #f5f5f5;
		color: #333;
		min-height: 100vh;
	}

	/* 搜索栏样式 */
	.search-container {
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f5f7;
		border-radius: 60rpx;
		padding: 16rpx 24rpx;
		transition: all 0.3s ease;
	}

	.search-box.focused {
		background-color: #ffffff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		border: 1px solid #e5e7eb;
	}

	.search-icon {
		font-size: 30rpx;
		color: #9ca3af;
		margin-right: 16rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #1f2937;
		background: transparent;
		height: 40rpx;
		line-height: 40rpx;
	}

	.search-input::placeholder {
		color: #9ca3af;
	}

	.clear-icon {
		font-size: 24rpx;
		color: #9ca3af;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #e5e7eb;
	}

	/* 高亮样式 */
	.highlight {
		color: #3b82f6;
		font-weight: bold;
	}

	/* 技术记录列表滚动区域 */
	.article-scroll {
		width: 100%;
		height: 83vh; /* 减去搜索栏和底部按钮高度 */
	}

	/* 技术记录列表样式 */
	.article-list {
		padding: 20rpx;
	}

	.article-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		transition: all 0.2s ease;
		cursor: pointer;
	}

	.article-item:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	/* 精选技术记录样式 */
	.article-item.featured {
		border-left: 4rpx solid #FF9500;
		background-color: #FFFDF7;
	}

	.title-container {
		display: flex;
		align-items: flex-start;
		gap: 10rpx;
		margin-bottom: 16rpx;
	}

	.article-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1F2937;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 精选标签 */
	.featured-tag {
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #FF9500;
		padding: 3rpx 10rpx;
		border-radius: 4rpx;
		margin-top: 4rpx;
		white-space: nowrap;
	}

	.article-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.category {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		background-color: #EBF4FF;
		color: #3B82F6;
		border-radius: 6rpx;
	}

	.date {
		font-size: 24rpx;
		color: #6B7280;
	}

	.status {
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 6rpx;
	}

	.status.published {
		background-color: #ECFDF5;
		color: #059669;
	}

	.status.draft {
		background-color: #FEF3C7;
		color: #D97706;
	}

	.article-excerpt {
		font-size: 26rpx;
		color: #4B5563;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 操作按钮 */
	.article-actions {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.action-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		transition: all 0.2s ease;
	}

	.action-icon:hover {
		transform: scale(1.1);
	}

	.view-btn {
		background-color: #EFF6FF;
		color: #3B82F6;
	}

	.edit-btn {
		background-color: #ECFDF5;
		color: #059669;
	}

	.delete-btn {
		background-color: #FEE2E2;
		color: #EF4444;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;
		color: #9CA3AF;
		text-align: center;
	}

	.empty-icon {
		font-size: 100rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 34rpx;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	.empty-hint {
		font-size: 28rpx;
		max-width: 60%;
	}

	/* 底部新增按钮 */
	.add-button {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 60rpx);
		height: 98rpx;
		background-color: #3B82F6;
		color: #fff;
		border-radius: 49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.3);
		transition: all 0.3s ease;
	}

	.add-button:active {
		transform: translateX(-50%) scale(0.98);
		box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.2);
	}

	.add-icon {
		font-size: 36rpx;
		margin-right: 14rpx;
	}
</style>
